<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3D卡片中心螺旋展开</title>
        <style>
            body {
                margin: 0;
                background: #000;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                perspective: 1000px;
            }

            .card-container {
                position: relative;
                width: 300px;
                height: 300px;
                transform-style: preserve-3d;
                animation: rotate-container 15s infinite linear;
                animation-play-state: paused;

            }

            .card-container:hover {
                animation-play-state: paused;

            }


            @keyframes rotate-container {
                0% {
                    transform: rotateY(0deg);
                }

                100% {
                    transform: rotateY(360deg);
                }
            }

            .card {
                position: absolute;
                width: 120px;
                height: 160px;
                left: 50%;
                top: 50%;
                margin-left: -60px;
                margin-top: -80px;
                border-radius: 8px;
                transform-style: preserve-3d;
                box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
                opacity: 0;
                overflow: hidden;

                /* 倒影效果 */
                -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.8));
            }

            .card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                border-radius: 8px;
            }

            /* 单张卡片展开的关键帧动画 */
            @keyframes card-reveal-and-move {
                0% {
                    opacity: 0;
                    transform: translateZ(0) rotateY(0deg);
                }

                1% {
                    opacity: 1;
                    transform: translateZ(0) rotateY(0deg);
                }

                20% {
                    opacity: 1;
                    transform: translateZ(-300px) rotateY(0deg);
                }

                40% {
                    opacity: 1;
                    transform: translateZ(0) rotateY(0deg);
                }

                100% {
                    opacity: 1;
                    /* 最终状态：
                   1. rotateY(var(--final-card-angle)): 将卡片沿容器Y轴旋转到其在圆周上的指定角度。
                   2. translateZ(var(--final-card-z)): 沿着卡片当前Z轴方向（已因上一步的rotateY而改变）向外推出指定距离。
                      这使得卡片位于以容器中心为圆心的圆周上。
                   3. rotateY(180deg): 额外地将卡片自身沿其Y轴旋转180度。
                      这使得卡片在圆周上的最终位置时，其正面始终面向圆心。
                */
                    transform:
                        rotateY(var(--final-card-angle)) translateZ(var(--final-card-z)) rotateY(180deg);
                }
            }
        </style>
    </head>

    <body>
        <div class="card-container" id="container">
            <div class="card"><img src="../public/img/1.jpg" alt="Card 1"></div>
            <div class="card"><img src="../public/img/2.jpg" alt="Card 2"></div>
            <div class="card"><img src="../public/img/3.jpg" alt="Card 3"></div>
            <div class="card"><img src="../public/img/4.jpg" alt="Card 4"></div>
            <div class="card"><img src="../public/img/5.jpg" alt="Card 5"></div>
            <div class="card"><img src="../public/img/6.jpg" alt="Card 6"></div>
        </div>

        <script>
            const container = document.getElementById('container');
            const cards = document.querySelectorAll('.card');
            const cardCount = cards.length;

            const cardRadius = 250;
            const singleCardAnimationDuration = 2000;
            const totalDeploymentTime = 3000;

            // 计算每张卡片动画的启动延迟
            // 确保所有卡片在 totalDeploymentTime 内按序展开到位
            const delayBetweenCards = totalDeploymentTime / cardCount;

            cards.forEach((card, index) => {
                // 计算每张卡片在圆周上的最终角度
                const angle = index * (360 / cardCount);
                // 通过 CSS 变量设置卡片的最终位置和朝向
                card.style.setProperty('--final-card-angle', `${angle}deg`);
                card.style.setProperty('--final-card-z', `${cardRadius}px`);
                // 应用卡片展开动画
                card.style.animation =
                    `card-reveal-and-move ${singleCardAnimationDuration}ms cubic-bezier(0.42, 0, 0.58, 1) forwards`;
                // cubic-bezier(0.42, 0, 0.58, 1) 是 'ease-in-out' 的一个变体，通常用于更平滑的回弹效果
                // 设置动画延迟，实现顺序展开
                card.style.animationDelay = `${index * delayBetweenCards}ms`;
            });
            // 计算容器整体旋转动画的启动时间
            // 在最后一张卡片完成其展开动画后，容器才开始旋转
            const delayBeforeContainerRotate = (cardCount - 1) * delayBetweenCards + singleCardAnimationDuration;
            // 在所有卡片展开完毕后启动容器的持续旋转
            setTimeout(() => {
                container.style.animationPlayState = 'running'; // 启动整体旋转动画
            }, delayBeforeContainerRotate);
        </script>
    </body>

</html>